<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>{$clock->name}</title>
        <link rel="stylesheet" href="/unpkg/lib-master/theme-chalk/index.css"> 
		<style type="text/css">
			html {
				background-color: #ED5A15;
			}

			.titles {
				height: 30px;
				background-color: #FFDDC5;
				font-size: 14px;
				line-height: 30px;
				padding-left: 30px;
			}
            .bcImg{
                position: absolute;
                left: 0;
            }
			.bcImg img {
				width: 100%;
				height: 200px;
			}
            .bcImg .desc{
                position: fixed;
                z-index: 999;
                padding: 5px 10px;
                right: 0;
                top: 60px;
                background: #FE8946;
                color: #fff;
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
                font-size: 12px;
            }

			.active {
				padding: 0 10px;
                margin-top: 120px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
			}

			.active-1 {
				padding-bottom: 30px;
				background-color: #FEEEE3;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				border-bottom: 1px dashed #FE8F49;
				position: relative;
			}

			.PS-message {
				padding:10px;
			}
            .PS-message strong{
                font-size: 14px;
                padding: 0 10px;
            }
			.days {
				font-size: 14px;
				text-align: center;
                padding:10px 0;
			}

			.activeBtn {
                width: 100%;
				position: absolute;
				bottom: -15px;
			}

			.btn {
                display: block;
				width: calc(100% - 60px);
                margin:0 auto;
				height: 28px;
				background-color: #FE8946;
				line-height: 28px;
				text-align: center;
				border-radius: 25px;
				color: #FFFFFF;
                font-size: 14px;
			}

			.touxiang {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				vertical-align: middle;
			}

			.point1,
			.point2 {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: #EE5B16;
				position: absolute;
				bottom: -10px;
			}

			.point1 {
				left: -10px;
			}

			.point2 {
				right: -10px;
			}

			.active-2 {
                padding-bottom: 30px;
				background-color: #FEEEE3;
			}

			.active-2 .title {
				display: flex;
				padding-top: 20px;
				padding-left: 10px;
			}

			.active-2 .title .line {
				border: 2px solid #FF8300;
				margin-right: 5px;
			}

			.cards {
				margin-top: 20px;
				display: flex;
                flex-flow: row wrap;
				justify-content: flex-start;
				padding: 0 10px;
			}

			.card {
                font-size: 12px;
                text-align: center;
                flex-basis: calc(50% - 10px);
                height: 130px;
                background-color: #FFFFFF;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin:5px;
                border-radius: 5px;
			}
            #showcode{
                display: none;
            }
			.EWM {
                text-align: center;
                padding:15px;
                background-color: #fff;
                border-radius: 10px;
			}

			.EWM img {
				max-width: 100px;
				max-height: 100px;
			}
            .getjl{
                color: #FE9C67;
            }
            .desccip{
                padding:15px;
                min-height: 200px;
            }
            .desccip h6{
                margin: 0;
                text-align: center;
                font-size: 16px;
            }
            .desccip p{
                margin: 0 0 5px 0;
                line-height: 24px;
                font-size: 14px;
                color: #666666;
            }
            .prossbar{
                display: flex;
                height: 4px;
                background-color: #ffe2cf;
                margin: 10px 15px;
                border-radius: 5px;
            }
            .prossbar .bar{
                position: relative;
                height: 4px;
            }
            .prossbar span{
                content: '';
                position: absolute;
                height: 10px;
                width: 10px;
                border-radius: 50%;
                right: 0;
                top: -3px;
                background-color: #ffe2cf;
            }
            .notice{
                font-size: 12px;
                padding: 2px 5px;
                background-color: #ff6e18;
                color: #fff;
                position: absolute;
                width: 100%;
                top: 10px;
                border-radius: 3px;
                left: 0;
            }
            .notice::before{
                content: '';
                position: absolute;
                border-top: 5px solid #ff6e18;
                border-right: 5px solid #ff6e18;
                border-left: 5px solid transparent;
                border-bottom: 5px solid transparent;
                top: -3px;
                transform: rotate(-45deg);
                left: 5px;
            }
		</style>

	</head>

	<body>
		<div id="app">
			<div class="titles">
				<span>@</span>
				<span>{if $clock->expiration_type == 1}长期活动{else if $clock->expiration_type == 2}{if $clock->expiration_date < time()}活动已结束{else}{if $clock->start_date > time()}活动未开启{else}活动已开启{$startDay}天,距离结束还剩{$endDay}天{/if}{/if}{/if}</span> 
			</div>
			<div class="bcImg">
				<img src="{$clock->bgurl}">
                <span class="desc" @click="showDesc">活动说明</span>
			</div>
			<div class="active">
				<div class="active-1">
					<div class="PS-message">
						<img class="touxiang" src="{$clock_et->headimgurl}" alt="">
						<strong>{$clock_et->nickname}</strong>
					</div>
					<div class="days">
						<span> {if $clock->expiration_type == 1}连续{else}累计{/if}打卡{$clock_et->continuous_day}天 </span>
					</div>
					<div class="activeBtn">
                        {if $is_clock}
                            <span class="btn">已打卡</span>
                        {else}
                            <span class="btn" @click="clock({$wid},{$clock_et->id})">打卡</span>
                        {/if}
					</div>
					<div class="point1"></div>
					<div class="point2"></div>
				</div>
				<div class="active-2">
					<div class="title">
						<span class="line"></span>
						<span>打卡任务（{count($clock->set_level)}）</span>
					</div>
					<div class="cards">
						{loop $clock->set_level as $level}
                            <div class="card">
                                <span style="color: #71706F;">{if $clock->expiration_type == 1}连续{else}累计{/if}打卡</span>
                                <span><strong style="font-size: 24px;color: #ff6e18;">{$level['days']}</strong>天</span>
                                {if $clock_et->continuous_day >= $level['days']}
                                    <span>已完成</span>
                                    <strong class="getjl" @click="getjl">领取奖励</strong>
                                {else}
                                    <span>未完成</span>
                                    {$level['names']}
                                {/if}
                            </div>
						{/loop}  
					</div>
                    <div class="prossbar">
                        {loop $clock->set_level as $key=> $level}
                            {if $clock_et->continuous_day >= $level['days']}
                                <div class="bar" style="width: calc(100%/{count($clock->set_level)});background-color: #ff6e18;">
                                    <span style="background-color: #ff6e18;"></span>
                                </div>
                            {else}
                                <div class="bar" style="width: calc(100%/{count($clock->set_level)});">
                                    <span></span>
                                    {if isset($level['is_finsh'])}
                                        <div class="notice">距离{$level['days']}天，还有{$level['days']-$clock_et->continuous_day}天</div>
                                    {/if}
                                </div>
                            {/if}
                        {/loop}
                    </div>
				</div>
			</div>
			<div id="showcode">
                <div class="EWM">
                    <img src="{$clock->qr_code}" width="150" height="150">
                    <p>恭喜您完成{if $clock->expiration_type == 1}连续{else}累计{/if}打卡<span id="days">{$clock_et->continuous_day}</span>天任务</p>
                    <p style="margin-top: 5px;">记得添加客服领取奖励哦~</p>
                </div>
			</div>
		</div>
		<script src="/unpkg/unpkg.vue.js"></script>
		<script src="/unpkg.axios.min.js"></script>
		<script src="/cdn/qs.min9.js"></script>
		<script src="/unpkg.index.js"></script>
        {$h->import('static/js/jquery.min.js')}
        <!-- {$h->import('static/js/layui.all.js')} -->
        <script src="/layui/layui.all.js"></script>
		<script type="text/javascript">
			window.onload=function(){
			     window.history.replaceState('', '', "index-{$clock->id}.html");
			}
			var myapp = new Vue({
				el: '#app',
				data() {
					return {
                       
					}
				},
				methods: {
                    getjl(){
                        layui.use(['layer'],a => { 
                            layer.open({
                                type: 1,
                                title: false,
                                closeBtn: true,
                                area: '300px;',
                                shade: 0.8,
                                content: document.getElementById('showcode').innerHTML
                            }) 
                        })
                    },
                    showDesc(){
                        layui.use(['layer'],a => { 
                            layer.open({
                                type: 2,
                                title: false,
                                closeBtn: true,
                                shadeClose: true,
                                area: 'auto',
                                shade: 0.8,
                                content: "showdesc-{$clock->id}.html"
                            }) 
                        })
                    },
					clock(wid,et_id) {
                        let t = this
                        if(t.isCard) return false;
						axios.get('/Addons/GroupClock/H5/GroupClock/clock.html?wid='+wid+'&et_id='+et_id).then(function(res) {
                         
                            if(res.data.status == "success"){
                                layui.use(['layer'],a => { layui.layer.msg('打卡成功') })
                            }else{
                                layui.use(['layer'],a => { layui.layer.msg(res.data.msg) })
                            }
                            window.location.href = "index-{$clock->id}.html"
						})
					}
				}
			})
		</script>
        <script>
            // window.onload=function(){
                window.history.replaceState('', '', "index-{$clock->id}.html");
            // }
        </script>
	</body>
</html>